<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
    <div class="home">
        <!-- 标题 -->
        <div class="ZTFX_title">状态分析</div>
        <!-- 内容 -->
        <!-- 下拉菜单 -->
        <div class="xiaLaCaiDan">
            <div class="jianGe">间隔：</div>
            <el-select v-model="selectedData" class="select-bg" placeholder="请选择设备" :popper-append-to-body="false">
                <el-option id="el-option" v-for="(item, index) in dataOptions" :key="index" :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="ZTFX_content">
            <!-- 分析结果的左侧 -->
            <div class="jieGuo_content_left bg_green">
                <div class="jieGuo_num">100</div>
                <div class="jieGuo_wenZi">{{ this.selectedData }}</div>
            </div>
            <!-- 分析结果的右侧 -->
            <div class="jieGuo_content_right">
                <div class="jieGuo_content_right_item item_wenZi_red">
                    <div class="item_icon icon_red"></div>
                    <div>严重（0-70）</div>
                </div>
                <div class="jieGuo_content_right_item item_wenZi_orange">
                    <div class="item_icon icon_orange"></div>
                    <div>异常（71-80）</div>
                </div>
                <div class="jieGuo_content_right_item item_wenZi_yellow">
                    <div class="item_icon icon_yellow"></div>
                    <div>注意（81-88）</div>
                </div>
                <div class="jieGuo_content_right_item item_wenZi_green">
                    <div class="item_icon icon_green"></div>
                    <div>正常（89-100）</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            // 状态分析下拉菜单  默认选择值
            selectedData: '5011组合电器',
            // 下拉菜单数据
            dataOptions: [
                {
                    value: "data1",
                    label: "7512组合电器"
                },
                {
                    value: "data2",
                    label: "数据1"
                },
                {
                    value: "data3",
                    label: "数据2"
                },
                {
                    value: "data4",
                    label: "数据3"
                },
                {
                    value: "data5",
                    label: "数据4"
                }
            ],

        }
    },
    components: {},
    mounted() {
    },
    methods: {
    }
};
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.home {
    width: 608px;
    height: 288px;
    background: url("../assets/ZTFX_bg.png") no-repeat;

    // 标题
    .ZTFX_title {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        color: #fff;
        text-align: left;
        margin-left: 54px;
    }

    // 下拉菜单
    .xiaLaCaiDan {
        display: flex;
        position: relative;
        width: 215px;
        height: 26px;
        margin-top: 14px;
        margin-left: 26px;

        // background-color: green;
        // margin-left: 365px;
        // 间隔
        .jianGe {
            width: 50px;
            height: 100%;
            line-height: 26px;
            text-align: right;
            color: #fff;
            // background-color: pink;
        }
    }

    // element的下拉菜单样式设置
    ::v-deep .el-select {
        width: 141px;
        height: 26px;
        background-color: #202f3e;

        .el-input__inner {
            height: 26px;
            background-color: #202f3e;
            border-radius: 0;
            color: #fff;
            border: 1px solid #40486a;
        }

        // 下拉箭头的设置
        .el-input__prefix,
        .el-input__suffix {
            top: 8px;
        }

    }

    // 内容
    .ZTFX_content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 447px;
        height: 166px;
        margin: auto;

        // 分析的左侧
        .jieGuo_content_left {
            width: 214px;
            height: 120px;
            color: #fff;
            font-size: 20px;
            margin-top: 20px;

            // 100
            .jieGuo_num {
                font-size: 31px;
            }

            .jieGuo_wenZi {
                font-size: 16px;
            }
        }

        // 分析的右侧
        .jieGuo_content_right {
            flex-direction: row;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            width: 162px;
            height: 168px;
            /* background-color: pink; */
            margin-left: 34px;

            .jieGuo_content_right_item {
                display: flex;
                align-items: center;
                width: 100%;
                height: 31px;
                /* background-color: green; */
                padding-left: 5px;

                .item_icon {
                    width: 19px;
                    height: 23px;
                    margin-left: 10px;
                    margin-right: 10px;
                }
            }
        }

        .bg_green {
            background: url("../assets/tuBiao_green.png") no-repeat;
            // background: url("../assets/tuBiao_orange.png") no-repeat;
        }

        .icon_red {
            background: url("../assets/icon_red.png") no-repeat;
        }

        .icon_orange {
            background: url("../assets/icon_orange.png") no-repeat;
        }

        .icon_yellow {
            background: url("../assets/icon_yellow.png") no-repeat;
        }

        .icon_green {
            background: url("../assets/icon_green.png") no-repeat;
        }

        .item_wenZi_red {
            color: red;
            background: url("../assets/bd_red.png") no-repeat;
        }

        .item_wenZi_orange {
            color: orange;
            background: url("../assets/bd_orange.png") no-repeat;
        }

        .item_wenZi_yellow {
            color: yellow;
            background: url("../assets/bg_yellow.png") no-repeat;
        }

        .item_wenZi_green {
            color: #35eb68;
            background: url("../assets/bg_green.png") no-repeat;
        }
    }
}
</style>